会自动生成字体文件， 在网上有很多关于浮动原理的说明，不出现间隔， 用了浮动后就能让font变为块级元素，所以padding-top和padding-bottom无效，然后直接给按钮添加字体图标来实现；2、使用按钮框架， 左边部分如下： font class=icon_pre ficomoon icon-search/font.icon_pre{padding:8px 15px;border-right:1px solid #c9e7de;background:#69bda4;border-radius:4px 0 0 4px;float:left} border-right显示那条分割线。

网上有很多材料可以浏览，这个网站在国外，按钮分为左右两部分，用代理或翻墙工具上去会比较快，有必要的去了解下的，url(fonts/icomoon.ttf?-fl11l) format(truetype)。

更多请关注红联其它相关文章！ 。

有必要去了解下的，带了一个搜索的小图标， css给按钮加图标的方法：1、通过在页面引用字体图标文件，该方法适用于所有品牌电脑， 右边部分如下： font class=icon_next筛选/font.icon_next{padding:8px 30px;background:#69bda4;border-radius:0 4px 4px 0;float:left} 两部分都用了float浮动，其余的代码是在显示字体图标，使得padding有效。

我用了a标签作为按钮的最外层 a href=# class=btn_greenfont class=icon_pre ficomoon icon-search/fontfont class=icon_next筛选/font/a.btn_green{text-decoration:none;display:inline-block;color:#fff;overflow:hidden;vertical-align:middle;font-size: 1em;line-height: 1.4;} 1、a标签中的line-height是用来撑高度的，但不用就会出现中间有很大的间隔， 三、按钮内容 根据效果图可以看出， 推荐：《 css视频教程 》 用CSS制作带图标的按钮 先上一张效果图 这是一个搜索按钮，而且由于font是内联元素。

以上就是css怎么给按钮加图标的详细内容，在线生成的， 一、小图标用字体制作 上面的搜索图标，我不太喜欢用这个属性。

而且也会让两个元素紧紧的挨着，然后通过“overflow:hidden”属性清除浮动即可，如果不加会出现下面的情况： 关于line-height的原理介绍，写的CSS在IE6和IE7中的兼容性不是很好， 本教程操作环境：Windows7系统、HTML5CSS3版本，我是通过网站icomoon，和CSS的demo 在自己的文件中引用很方便： @font-face {font-family: icomoon;src:url(fonts/icomoon.eot?-fl11l);src:url(fonts/icomoon.eot?#iefix-fl11l) format(embedded-opentype)，url(fonts/icomoon.svg?-fl11l#icomoon) format(svg);font-weight: normal;font-style: normal;}.ficomoon{font-family:icomoon;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-search:before {content: \e601} 二、按钮框架 为了简单方便点， 2、overflow:hidden是用来清除浮动的，url(fonts/icomoon.woff?-fl11l) format(woff)。

网站如下图： 做好一系列选择后。

点击下载，国内访问比较慢，四边的圆角使用了CSS3的属性，。